<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="header-title">我的</text>
    </view>

    <!-- 个人信息区域 -->
    <view class="user-info">
      <view class="avatar-container" @click="chooseAvatar" @longpress="previewAvatar">
        <image
          class="avatar"
          :src="fullAvatarUrl"
          mode="aspectFill"
          @error="handleAvatarError"
          @load="handleAvatarLoad"
          :fade-show="true"
          lazy-load
        ></image>
        <view class="avatar-edit" :class="{ 'uploading': avatarUploading }">
          <uni-icons v-if="!avatarUploading" type="camera" size="16" color="#fff"></uni-icons>
          <view v-else class="loading-spinner"></view>
        </view>
        <!-- 上传进度遮罩 -->
        <view v-if="avatarUploading" class="avatar-uploading-mask">
          <view class="uploading-text">上传中...</view>
        </view>
        <!-- 头像加载失败提示 -->
        <view v-if="avatarLoadError && avatarLoadAttempted && !avatarUploading && userInfo.avatar && userInfo.avatar !== defaultAvatar && avatarRetryCount >= maxRetryCount" class="avatar-error-tip">
          <text class="error-text">头像加载失败</text>
        </view>
      </view>
      <text class="nickname">{{ userInfo.nickname || '' }}</text>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @click="showEditInfoDialog">
          <view class="menu-icon">
            <uni-icons type="person" size="22" color="#4CAF50"></uni-icons>
          </view>
          <text class="menu-title">编辑个人信息</text>
          <view class="menu-arrow">
            <uni-icons type="right" size="16" color="#C8C8C8"></uni-icons>
          </view>
        </view>

        <view class="menu-item" @click="showChangePasswordDialog">
          <view class="menu-icon">
            <uni-icons type="locked" size="22" color="#4CAF50"></uni-icons>
          </view>
          <text class="menu-title">修改密码</text>
          <view class="menu-arrow">
            <uni-icons type="right" size="16" color="#C8C8C8"></uni-icons>
          </view>
        </view>
      </view>



      <view class="menu-group">
        <view class="menu-item danger" @click="showLogoutDialog">
          <view class="menu-icon">
            <uni-icons type="loop" size="22" color="#FF5722"></uni-icons>
          </view>
          <text class="menu-title">退出登录</text>
          <view class="menu-arrow">
            <uni-icons type="right" size="16" color="#C8C8C8"></uni-icons>
          </view>
        </view>

        <view class="menu-item danger" @click="showDeleteDialog">
          <view class="menu-icon">
            <uni-icons type="trash" size="22" color="#F44336"></uni-icons>
          </view>
          <text class="menu-title">注销账号</text>
          <view class="menu-arrow">
            <uni-icons type="right" size="16" color="#C8C8C8"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录确认弹窗 -->
    <uni-popup ref="logoutPopup" type="dialog">
      <view class="dialog-container">
        <view class="dialog-header">
          <uni-icons type="info" size="40" color="#FF9800"></uni-icons>
          <text class="dialog-title">确认退出</text>
        </view>
        <view class="dialog-content">
          <text class="dialog-text">确定要退出登录吗？退出后需要重新登录才能使用。</text>
        </view>
        <view class="dialog-actions">
          <button class="dialog-btn cancel" @click="closeLogoutDialog">取消</button>
          <button class="dialog-btn confirm" @click="handleLogout">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 注销账号确认弹窗 -->
    <uni-popup ref="deletePopup" type="dialog">
      <view class="dialog-container">
        <view class="dialog-header">
          <uni-icons type="closeempty" size="40" color="#F44336"></uni-icons>
          <text class="dialog-title">危险操作</text>
        </view>
        <view class="dialog-content">
          <text class="dialog-text warning">注销账号将永久删除您的所有数据，此操作不可恢复！</text>
          <text class="dialog-text">请确认是否继续？</text>
        </view>
        <view class="dialog-actions">
          <button class="dialog-btn cancel" @click="closeDeleteDialog">取消</button>
          <button class="dialog-btn confirm danger" @click="handleDeleteAccount">确定注销</button>
        </view>
      </view>
    </uni-popup>

    <!-- 编辑个人信息弹窗 -->
    <uni-popup ref="editInfoPopup" type="dialog">
      <view class="dialog-container">
        <view class="dialog-header">
          <uni-icons type="person" size="40" color="#4CAF50"></uni-icons>
          <text class="dialog-title">编辑个人信息</text>
        </view>
        <view class="dialog-content">
          <form @submit.prevent="handleEditInfo">
            <view class="form-group">
              <label for="nickname">昵称:</label>
              <input type="text" id="nickname" v-model="userInfo.nickname" />
            </view>
            <view class="form-group">
              <label for="phone">手机号:</label>
              <input type="tel" id="phone" v-model="userInfo.phone" />
            </view>
            <view class="form-group">
              <label for="email">邮箱:</label>
              <input type="email" id="email" v-model="userInfo.email" />
            </view>
            <view class="dialog-actions">
              <button class="dialog-btn cancel" @click="closeEditInfoDialog">取消</button>
              <button class="dialog-btn confirm" type="submit" @click="handleEditInfo">确定</button>
            </view>
          </form>
        </view>
      </view>
    </uni-popup>

    <!-- 修改密码弹窗 -->
    <uni-popup ref="changePasswordPopup" type="dialog">
      <view class="dialog-container">
        <view class="dialog-header">
          <uni-icons type="locked" size="40" color="#4CAF50"></uni-icons>
          <text class="dialog-title">修改密码</text>
        </view>
        <view class="dialog-content">
          <form @submit.prevent="handleChangePassword">
            <view class="form-group">
              <label for="oldPassword">当前密码:</label>
              <input type="password" id="oldPassword" v-model="oldPassword" placeholder="请输入当前密码" />
            </view>
            <view class="form-group">
              <label for="newPassword">新密码:</label>
              <input type="password" id="newPassword" v-model="newPassword" placeholder="请输入新密码" />
            </view>
            <view class="form-group">
              <label for="confirmPassword">确认新密码:</label>
              <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请再次输入新密码" />
            </view>
            <view class="dialog-actions">
              <button class="dialog-btn cancel" @click="closeChangePasswordDialog">取消</button>
              <button class="dialog-btn confirm" type="submit" @click="handleChangePassword">确定</button>
            </view>
          </form>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { userApi, authApi } from '../../api/index.js';
import { getUserInfo, setUserInfo, clearAuth, isLoggedIn, validateEmail, validatePhone } from '../../utils/auth.js';

uni.setNavigationBarTitle({
	  title:'个人'
})

// 默认头像
const defaultAvatar = '';

// 头像加载状态
const avatarLoadError = ref(false);
const avatarLoadAttempted = ref(false);
const avatarRetryCount = ref(0);
const maxRetryCount = 2;

// 用户信息
const userInfo = reactive({
  nickname: '',
  avatar: '',
  phone: '',
  email: '',
  level: 1,
  experience: 0
});

// 弹窗引用
const logoutPopup = ref(null);
const deletePopup = ref(null);
const editInfoPopup = ref(null);
const changePasswordPopup = ref(null);

// 状态栏高度
const statusBarHeight = ref(0);

// 头像上传状态
const avatarUploading = ref(false);

// 修改密码表单数据
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

// 计算属性：获取头像URL
const fullAvatarUrl = computed(() => {
  console.log('计算头像URL - userInfo.avatar:', userInfo.avatar);
  console.log('计算头像URL - avatarLoadError:', avatarLoadError.value);
  console.log('计算头像URL - avatarLoadAttempted:', avatarLoadAttempted.value);

  // 如果没有头像，返回默认头像
  if (!userInfo.avatar) {
    console.log('没有头像，返回默认头像');
    return defaultAvatar;
  }

  // 如果头像加载失败且已经尝试过，返回默认头像
  if (avatarLoadError.value && avatarLoadAttempted.value) {
    console.log('头像加载失败，返回默认头像');
    return defaultAvatar;
  }

  // 后端现在返回完整URL，直接使用
  console.log('返回真实头像URL:', userInfo.avatar);
  return userInfo.avatar;
});

// 头像加载错误处理
const handleAvatarError = () => {
  // 只有在不是默认头像的情况下才设置错误状态
  if (userInfo.avatar && userInfo.avatar !== defaultAvatar) {
    console.warn('头像加载失败，使用默认头像');

    // 增加重试计数
    avatarRetryCount.value++;

    // 如果重试次数未达到上限，尝试重新加载
    if (avatarRetryCount.value <= maxRetryCount) {
      console.log(`头像加载重试 ${avatarRetryCount.value}/${maxRetryCount}`);
      // 延迟一段时间后重试
      setTimeout(() => {
        avatarLoadAttempted.value = false;
        avatarLoadError.value = false;
      }, 1000 * avatarRetryCount.value); // 递增延迟时间
    } else {
      // 达到最大重试次数，标记为最终失败
      avatarLoadError.value = true;
      avatarLoadAttempted.value = true;
      console.warn('头像加载重试次数已达上限，使用默认头像');
    }
  }
};

// 头像加载成功处理
const handleAvatarLoad = () => {
  // 只有在有真实头像的情况下才重置错误状态
  if (userInfo.avatar && userInfo.avatar !== defaultAvatar) {
    avatarLoadError.value = false;
    avatarLoadAttempted.value = true;
    avatarRetryCount.value = 0; // 重置重试计数
    console.log('头像加载成功');
  }
};

// 预览头像
const previewAvatar = () => {
  if (!userInfo.avatar || avatarLoadError.value) {
    return;
  }

  // 如果是默认头像，不进行预览
  if (userInfo.avatar === defaultAvatar) {
    return;
  }

  uni.previewImage({
    urls: [userInfo.avatar],
    current: userInfo.avatar,
    fail: (error) => {
      console.error('预览头像失败:', error);
      uni.showToast({
        title: '预览失败',
        icon: 'none'
      });
    }
  });
};

// 页面初始化
onMounted(() => {
  // 检查登录状态
  if (!isLoggedIn()) {
    uni.reLaunch({
      url: '/pages/login/login'
    });
    return;
  }

  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;

  // 加载用户信息
  loadUserInfo();
});

// 加载用户信息
const loadUserInfo = async () => {
  try {
    // 先从本地存储加载
    const storedUserInfo = getUserInfo();
    if (storedUserInfo) {
      Object.assign(userInfo, storedUserInfo);
    }

    // 然后从服务器获取最新信息
    const response = await userApi.getCurrentUser();

    if (response.data) {
      console.log('后端返回的用户信息:', response.data);
      console.log('后端返回的头像URL:', response.data.avatarUrl);

      const serverUserInfo = {
        nickname: response.data.nickname || '默认昵称',
        avatar: response.data.avatarUrl || '',
        phone: response.data.phone || '',
        email: response.data.email || '',
        level: response.data.level || 1,
        experience: response.data.experience || 0
      };

      console.log('处理后的用户信息:', serverUserInfo);
      console.log('处理后的头像URL:', serverUserInfo.avatar);

      Object.assign(userInfo, serverUserInfo);
      setUserInfo(serverUserInfo);

      // 重置头像加载状态
      avatarLoadError.value = false;
      avatarLoadAttempted.value = false;
      avatarRetryCount.value = 0;
    }
  } catch (error) {
    console.error('加载用户信息失败:', error);

    // 如果服务器请求失败，使用本地存储的信息
    const storedUserInfo = getUserInfo();
    if (storedUserInfo) {
      Object.assign(userInfo, storedUserInfo);
    } else {
      // 默认用户信息
      userInfo.nickname = '默认昵称';
    }
  }
};

// 选择头像
const chooseAvatar = () => {
  // 显示选择来源的操作菜单
  uni.showActionSheet({
    itemList: ['从相册选择', '拍照'],
    success: (res) => {
      const sourceType = res.tapIndex === 0 ? ['album'] : ['camera'];

      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'], // 使用压缩图片
        sourceType: sourceType,
        success: async (chooseRes) => {
          try {
            // 先显示选中的图片作为预览
            userInfo.avatar = chooseRes.tempFilePaths[0];

            // 设置上传状态
            avatarUploading.value = true;
            uni.showLoading({
              title: '上传中...'
            });

            // 上传头像到服务器
            const response = await userApi.uploadAvatar(chooseRes.tempFilePaths[0]);

            // 后端返回的数据结构：{ code: 200, message: "头像更新成功", data: "avatarUrl" }
            if (response.data) {
              userInfo.avatar = response.data;
              setUserInfo(userInfo);

              // 重置头像加载状态
              avatarLoadError.value = false;
              avatarLoadAttempted.value = false;
              avatarRetryCount.value = 0;

              uni.hideLoading();
              uni.showToast({
                title: response.message || '头像更新成功',
                icon: 'success'
              });
            } else {
              throw new Error('上传响应数据格式错误');
            }
          } catch (error) {
            uni.hideLoading();
            console.error('头像上传失败:', error);

            // 显示具体的错误信息
            const errorMessage = error.message || error.msg || '头像上传失败';
            uni.showToast({
              title: errorMessage,
              icon: 'none',
              duration: 3000
            });

            // 如果上传失败，恢复原来的头像
            const storedUserInfo = getUserInfo();
            if (storedUserInfo && storedUserInfo.avatar) {
              userInfo.avatar = storedUserInfo.avatar;
            } else {
              userInfo.avatar = '';
            }
          } finally {
            // 重置上传状态
            avatarUploading.value = false;
          }
        },
        fail: (error) => {
          console.error('选择图片失败:', error);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },
    fail: () => {
      // 用户取消选择
    }
  });
};

// 显示编辑个人信息弹窗
const showEditInfoDialog = () => {
  editInfoPopup.value.open();
};

// 关闭编辑个人信息弹窗
const closeEditInfoDialog = () => {
  editInfoPopup.value.close();
};

// 处理编辑个人信息
const handleEditInfo = async () => {
  // 验证邮箱
  if (userInfo.email) {
    const emailValidation = validateEmail(userInfo.email);
    if (!emailValidation.valid) {
      uni.showToast({
        title: emailValidation.message,
        icon: 'none'
      });
      return;
    }
  }

  // 验证手机号
  if (userInfo.phone) {
    const phoneValidation = validatePhone(userInfo.phone);
    if (!phoneValidation.valid) {
      uni.showToast({
        title: phoneValidation.message,
        icon: 'none'
      });
      return;
    }
  }

  try {
    uni.showLoading({
      title: '更新中...'
    });

    const updateData = {
      nickname: userInfo.nickname,
      phone: userInfo.phone,
      email: userInfo.email
    };

    await userApi.updateCurrentUser(updateData);

    // 更新本地存储
    setUserInfo(userInfo);

    uni.hideLoading();
    closeEditInfoDialog();
    uni.showToast({
      title: '个人信息修改成功',
      icon: 'success'
    });
  } catch (error) {
    uni.hideLoading();
    console.error('更新个人信息失败:', error);

    // 错误信息已在请求拦截器中处理，这里不需要重复显示
  }
};

// 显示修改密码弹窗
const showChangePasswordDialog = () => {
  changePasswordPopup.value.open();
};

// 关闭修改密码弹窗
const closeChangePasswordDialog = () => {
  changePasswordPopup.value.close();
  // 清空表单数据
  oldPassword.value = '';
  newPassword.value = '';
  confirmPassword.value = '';
};

// 处理修改密码
const handleChangePassword = async () => {
  if (!oldPassword.value) {
    uni.showToast({
      title: '请输入当前密码',
      icon: 'none'
    });
    return;
  }

  if (!newPassword.value) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none'
    });
    return;
  }

  if (newPassword.value.length < 6) {
    uni.showToast({
      title: '新密码长度不能少于6位',
      icon: 'none'
    });
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({
      title: '新密码和确认密码不一致',
      icon: 'none'
    });
    return;
  }

  if (oldPassword.value === newPassword.value) {
    uni.showToast({
      title: '新密码不能与当前密码相同',
      icon: 'none'
    });
    return;
  }

  try {
    uni.showLoading({
      title: '修改中...'
    });

    await userApi.changePassword(oldPassword.value, newPassword.value);

    uni.hideLoading();
    closeChangePasswordDialog();
    uni.showToast({
      title: '密码修改成功',
      icon: 'success'
    });
  } catch (error) {
    uni.hideLoading();
    console.error('修改密码失败:', error);

    // 错误信息已在请求拦截器中处理，这里不需要重复显示
  }
};

// 显示退出登录弹窗
const showLogoutDialog = () => {
  logoutPopup.value.open();
};

// 关闭退出登录弹窗
const closeLogoutDialog = () => {
  logoutPopup.value.close();
};

// 显示注销账号弹窗
const showDeleteDialog = () => {
  deletePopup.value.open();
};

// 关闭注销账号弹窗
const closeDeleteDialog = () => {
  deletePopup.value.close();
};

// 处理退出登录
const handleLogout = async () => {
  uni.showLoading({
    title: '退出中...'
  });

  try {
    // 调用登出 API
    await authApi.logout();
  } catch (error) {
    console.error('登出 API 调用失败:', error);
    // 即使 API 调用失败，也继续执行本地清理
  }

  // 清除本地认证信息
  clearAuth();

  uni.hideLoading();
  uni.showToast({
    title: '已退出登录',
    icon: 'success'
  });

  // 跳转到登录页
  setTimeout(() => {
    uni.reLaunch({
      url: '/pages/login/login'
    });
  }, 1500);
};

// 处理注销账号
const handleDeleteAccount = async () => {
  uni.showLoading({
    title: '注销中...'
  });

  try {
    // 调用删除账户 API
    await userApi.deleteCurrentUser();

    uni.hideLoading();

    // 显示成功提示
    uni.showModal({
      title: '注销成功',
      content: '您的账号已成功注销，感谢您的使用！',
      showCancel: false,
      confirmText: '确定',
      success: () => {
        // 清除所有本地数据
        clearAuth();
        uni.clearStorageSync();

        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/login'
        });
      }
    });
  } catch (error) {
    uni.hideLoading();
    console.error('注销账号失败:', error);

    // 错误信息已在请求拦截器中处理，这里不需要重复显示
  }
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

.status-bar {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.header {
  height: 88rpx;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2rpx 12rpx rgba(76, 175, 80, 0.3);
}

.header-title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 600;
}

.header-setting {
  position: absolute;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

.user-info {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 24rpx;
  padding: 50rpx 30rpx 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-container {
  position: relative;
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 6rpx solid #4CAF50;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.3);
}

.avatar {
  width: 100%;
  height: 100%;
}

.avatar-edit {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.avatar-edit.uploading {
  background: linear-gradient(135deg, #FF9800 0%, #FFA726 100%);
}

.loading-spinner {
  width: 16rpx;
  height: 16rpx;
  border: 2rpx solid #ffffff;
  border-top: 2rpx solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatar-uploading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploading-text {
  color: #ffffff;
  font-size: 20rpx;
  font-weight: 500;
}

.avatar-error-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(244, 67, 54, 0.8);
  border-radius: 0 0 50% 50%;
  padding: 4rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-text {
  color: #ffffff;
  font-size: 18rpx;
  font-weight: 500;
}

.nickname {
  font-size: 40rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.user-level {
  font-size: 26rpx;
  color: #4CAF50;
  background-color: #e8f5e9;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
}

.user-stats {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  color: #4CAF50;
  font-weight: 600;
}

.stat-label {
  font-size: 22rpx;
  color: #666666;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background-color: #e0e0e0;
}

.menu-section {
  padding: 0 20rpx 40rpx;
}

.menu-group {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: background-color 0.3s;
  position: relative;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f8f9fa;
}

.menu-item.danger .menu-title {
  color: #F44336;
}

.menu-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  background-color: #f5f7f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.menu-title {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.menu-badge {
  background-color: #FF9800;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
}

.badge-text {
  font-size: 20rpx;
  color: #ffffff;
}

.menu-arrow {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.version-info {
  text-align: center;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.version-text {
  font-size: 24rpx;
  color: #999999;
}

.dialog-container {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
}

.dialog-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
  margin-top: 16rpx;
}

.dialog-content {
  padding: 0 30rpx 30rpx;
  text-align: center;
}

.dialog-text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.dialog-text.warning {
  color: #F44336;
  font-weight: 500;
}

.dialog-actions {
  display: flex;
  border-top: 1rpx solid #e0e0e0;
}

.dialog-btn {
  flex: 1;
  height: 88rpx;
  border: none;
  background-color: transparent;
  font-size: 32rpx;
  color: #666666;
  border-radius: 0;
}

.dialog-btn.confirm {
  color: #4CAF50;
  font-weight: 600;
  border-left: 1rpx solid #e0e0e0;
}

.dialog-btn.danger {
  color: #F44336;
}

.dialog-btn:active {
  background-color: #f8f9fa;
}

.settings-container {
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 60vh;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.settings-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
}

.settings-close {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-content {
  padding: 20rpx 0;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 28rpx;
  color: #333333;
}

.setting-value {
  font-size: 26rpx;
  color: #999999;
}

.form-group {
  margin-bottom: 20rpx;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8rpx;
  font-size: 28rpx;
  color: #333333;
}

.form-group input {
  width: 100%;
  height: 60rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 28rpx;
}
</style>